<template>
  <div class="land-view">
    <!--地图页面-->
    <div class="map-view">
      <div class="left-view-table">
        <div v-if="!eidtRowType">
        <landTotal :farmcount="farmcount" />
        <div class="optate-search">
          <div class="scinput">
            <el-input placeholder="请输入地块名称" clearable size="mini" v-model="searchInfo.farmLandName">
              <template #append style="padding: 0 4px;">
                <vxe-button type="text" @click="btnQuery" icon="vxe-icon-search"></vxe-button>
              </template>
            </el-input>
          </div>
          <hoverMuen @change="changeMuen" />
        </div>
        <querySelect @change="querySelectFilter" />
           <LandList 
              :height="'calc(100vh - 300px)'"
              v-loading="loadingLand"
              :tableData="tableData"
              @onClick="setMapData"
              @page-change="pageChangeEvent"
              :pageInfo="searchInfo" />
        </div>
        <!--地块编辑-->
        <div v-else>
          <eidtRow   :farmLandId="dropFarmLandId" @close="eidtRowType=false" />
        </div>
      </div>
      <div class="land-detail" v-if="showDetail">
        <land-detail 
               :farmLandId="landInfo?.farmLandId" 
                @clickDel="btnDel"
                @eidt="eidtClick"
                :farmLandNo="dropFarmLandNo"
                :farmLandPic="dropFarmLandPic"
                @close="showDetail=false" />
      </div>
        <vxe-modal v-model="openModel"  
             v-if="openModel"
              mask-closable
              :draggable="false"
              :mask="false" 
              :showHeader="openModelType==1?false:true"
              className="max-modal-view"
              :zIndex="-1" 
              :width="winWidth" 
              :lock-scroll="false"
              @close="()=>{btnQuery()}"
              :position="{top: 60, left: 268}" >
              <template #title> 
                <vxe-icon v-if="openModelType==2" name="feedback"></vxe-icon>  
                <vxe-icon v-if="openModelType==4" name="copy" ></vxe-icon>  
                {{openModelType==2?'批量编辑地块':'土壤养分'}}
                </template>
                <template #default>
                  <receiveLand :farmcount="farmcount" 
                  :mapList="receiveDataList"
                  v-if="openModelType==1 && openModel"   @close="openModel=false" /> 
                  <eidtLand v-if="openModelType==2 && openModel" :farmLandId="dropFarmLandId"  @close="openModel=false" /> 
                  <nutritionLand v-if="openModelType==4 && openModel"  @close="openModel=false" /> 
                </template>
        </vxe-modal>
        <MapViewer 
            :landInfo="landInfo" 
            :params="searchParams"  
            @complete="getCompleteMapList"
            @onClick="(item)=>dropFarmLandId = item?.farmLandId"
            @onOpen="btnOpen" />
    </div>
  </div>
</template>
<script setup>
import {ref, onMounted} from 'vue'
import {getLandGroupList, getLandTagsList, getLandList} from '@/api/plant'
import {getLandTypeList, releaseFarmland,getFarmCount} from '@/api/gis'
import LandList from './components/landList.vue'
import landTotal from './components/landTotal.vue'
import hoverMuen from './components/hoverMuen.vue'
import MapViewer from "./components/landMap.vue";
import {useUserStore} from '@/pinia/modules/user'
import {VXETable} from 'vxe-table'
const userStore = useUserStore()
import landDetail from './popup-land/landDetail.vue'
import querySelect from './components/querySelect.vue'
import eidtRow from './popup-land/eidtRow.vue'
import eidtLand from './popup-land/eidtLand.vue'
import nutritionLand from './popup-land/nutritionLand.vue'
import receiveLand from './popup-land/receive-land-map.vue'
const farmcount = ref({farmLandTotal: 0, farmLandCount: 0})
const searchInfo = ref({page: 1, limit: 10, total: 0})
const searchParams=ref({
  landGroupId:'',
  landTypeId:'',
  cropId:'',
  landTagId:'',
  farmLandName:''
})
const landGroups = ref([])
const landTypes = ref([])
const landTags = ref([])
const tableData = ref([])
const openModel = ref(false)
const openDetails = ref(false)
const showDetail = ref(false)
const dropFarmLandId = ref('')
const dropFarmLandNo = ref('')
const dropFarmLandPic = ref('')
const eidtRowType = ref(false)
const showPop = ref(false)
const openModelType = ref(0)
const locationMap = ref({})
const landInfo = ref({})
const winWidth = ref(window.innerWidth-275)
const receiveDataList = ref([])
const eidtClick = (row) => {
  dropFarmLandId.value = row.farmLandId
  locationMap.value= {
      longitude:Number(row.locationLongitude||row.locationlongitude)+0.000003,
      latitude:Number(row.locationLatitude||row.locationlatitude)+0.000003,
    }
  openDetails.value = false
  showDetail.value = false
  eidtRowType.value = true
  removePostion()

}

onMounted(() => {
  getLandGroups()
  getDataList()
  getLandType()
  getLandTags()
  window.addEventListener('resize', ()=>{
     winWidth.value = window.innerWidth-275
  })

})

const btnQuery = () => {
  searchInfo.value.page = 1
  getDataList()
}

const getCompleteMapList =(data)=>{
  receiveDataList.value = data?.map((item)=>{
    item.farmId = userStore.userInfo.farmId
    return item
  })
}

const querySelectFilter = (data) => {
  searchInfo.value = {...searchInfo.value,...data}
  searchParams.value ={
    landGroupId:searchInfo.value.landGroupId,
    landTypeId:searchInfo.value.landTypeId,
    cropId:searchInfo.value.cropId,
    landTagId:searchInfo.value.landTagId,
    farmLandName:searchInfo.value.farmLandName
  }
    btnQuery()
}

const getDataList = async () => {
  let params = {
    ...searchInfo.value,
    companyId: userStore.userInfo.companyId,
    farmId: userStore.userInfo.farmId,
    landTagId: searchInfo.value.landTagId ? [searchInfo.value.landTagId] : null,
    order: 'desc',
    column: 'id',
  };
  let data = await getLandList(params)
  if (data.success) {
    tableData.value = data.data || []
    searchInfo.value.total = data.total || 0
   }
  let res = await getFarmCount(params)
  if (res.success) {
    farmcount.value = res.data || {}
  }
}



const removePostion = () => {
    showPop.value = false
}


const changeMuen = (item) => {
    dropFarmLandId.value=''
    showDetail.value = false
    openModelType.value = item.type
    openModel.value = true
}

const pageChangeEvent = ({currentPage, pageSize}) => {
  searchInfo.value.page = currentPage
  searchInfo.value.limit = pageSize
  getDataList()
}

//移除地块
const btnDel = async (row) => {
  const info = await VXETable.modal.confirm({
    title: '确认删除地块吗？',
    content: '删除后的地块不可见。'
  })
  if (info === 'confirm') {
    let res = await releaseFarmland([row.farmLandId])
    if (res.success) {
      VXETable.modal.message({content: '删除成功', status: 'success'})
      showDetail.value = false
      removePostion()
      btnQuery()
    } else {
      VXETable.modal.message({content: res.message, status: 'error'})
    }
  }
}

const btnOpen =(item)=>{
  if(item.type==2){
    showDetail.value = true
    openDetails.value = false
  }else{
    eidtClick(item)
  }
}

const setMapData = (row) => {
   landInfo.value = {...row,
      longitude:Number(row.locationLongitude),
      latitude:Number(row.locationLatitude)
   }
}


const getLandType = () => {
  const params = {
    farmId: userStore.userInfo.farmId,
    limit: 100,
  };
  getLandTypeList(params).then((res) => {
    const list = res.data.map((group) => {
      return {
        label: group.landTypeName,
        value: group.landTypeId,
      }
    })
    landTypes.value = [{label: '全部', value: ''}, ...list];
  })
}

const getLandTags = () => {
  const params = {
    farmId: userStore.userInfo.farmId,
    companyId: userStore.userInfo.companyId,
    limit: 100,
  };
  getLandTagsList(params).then((res) => {
    const list = res.data.map((group) => {
      return {
        label: group.tagName,
        value: group.landTagId,
      };
    });
    landTags.value = [{label: '全部', value: ''}, ...list];
  })
}

const getLandGroups = () => {
  const params = {
    farmId: userStore.userInfo.farmId,
    companyId: userStore.userInfo.companyId,
    limit: 100,
  };
  getLandGroupList(params).then((res) => {
    const list = res.data.map((group) => {
      return {
        label: group.groupName,
        value: group.landGroupId,
      };
    });
    landGroups.value = [{label: '全部', value: ''}, ...list];
  })
}

</script>
<style scoped lang="scss">
.land-view {
  height: calc(100vh - 120px);
  position: relative;

  .left-view-table {
    position: absolute;
    left: 20px;
    width: 300px;
    background-color: #fff;
    height: 100%;
    z-index: 999;
    height: calc(100vh - 90px);
    padding-top: 10px;
    top: 15px;

    .optate-search {
      display: flex;
      padding: 0 10px;
      margin: 0 0 5px 0;

      .scinput {
        flex: 1;
      }

    }
  }

  .map-view {
    height: calc(100vh - 70px);
    width: 100%;
  }

}
.land-detail {
  position: absolute;
  z-index: 205;
  width: auto;
  height: auto;
  left: 330px;
  top: 10px;
  bottom: 10px;
  right: 10px;
  background-color: #fff;
}
</style>
